<script setup lang="ts">
import { getMedicalOrderLogistics } from '@/services/order'
import type { Logistics, Location } from '@/types/order'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'
import startIcon from '@/assets/start.png'
import endIcon from '@/assets/end.png'
import carIcon from '@/assets/car.png'
const route = useRoute()
// 获取物流信息
const logistics = ref<Logistics>()

// 准备工作
// 1. 准备一个宽高的容器
// 2. window挂载_AMapSecurityConfig
window._AMapSecurityConfig = {
  securityJsCode: 'bb6d757ecd7275c443923c411ce1389a'
}
onMounted(async () => {
  const res = await getMedicalOrderLogistics(route.params.id as string)
  console.log(res)
  logistics.value = res.data
  // 初始化地图
  initMap()
})

const initMap = () => {
  AMapLoader.load({
    key: '0f5176f9da5e0aa51e0050a3de52fdf9', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      const map = new AMap.Map('map', {
        viewMode: '3D', //是否为3D地图模式
        zoom: 10, //初始化地图级别
        mapStyle: 'amap://styles/whitesmoke' //设置地图的显示样式
      })
      AMap.plugin('AMap.Driving', function () {
        var driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          // policy: AMap.DrivingPolicy.LEAST_TIME,
          map: map, //指定将路线规划方案绘制到对应的AMap.Map对象上
          showTraffic: false, // 不展示路况信息
          hideMarkers: true // 隐藏起点终点 途径站点图标
        })
        // 起点位置的经纬度对象
        const start = logistics.value?.logisticsInfo.shift()
        // 终点位置的经纬度对象
        const end = logistics.value?.logisticsInfo.pop()
        var startLngLat = [start?.longitude, start?.latitude]
        var endLngLat = [end?.longitude, end?.latitude]

        const setMarker = (
          image: string,
          obj: Location,
          width: number = 25,
          height: number = 30
        ) => {
          // icon设置图片的大小和偏移
          const icon = new AMap.Icon({
            size: new AMap.Size(width, height), // 图标尺寸
            image: image, // Icon的图像
            imageSize: new AMap.Size(width, height) // 根据所设置的大小拉伸或压缩图片
          })

          // 创建一个 Marker 实例：使用marker设置位置
          const marker = new AMap.Marker({
            position: new AMap.LngLat(obj?.longitude, obj?.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            icon: icon,
            offset: new AMap.Pixel(-width / 2, -height) // 图像相对展示区域的偏移量，适于雪碧图等
          })
          // 将创建的点标记添加到已有的地图实例：
          map.add(marker)
          return marker
        }
        setMarker(startIcon, start!) // 起点覆盖物
        setMarker(endIcon, end!) // 终点覆盖物
        const current = setMarker(
          // 当前位置覆盖物
          carIcon,
          logistics.value!.currentLocationInfo,
          33,
          20
        )

        driving.search(
          startLngLat,
          endLngLat,
          // 添加途经站点
          {
            waypoints: logistics.value?.logisticsInfo.map((item) => [
              item.longitude,
              item.latitude
            ])
          },
          function () {
            // 未出错时，result即是对应的路线规划方案
            // console.log(result)
            setTimeout(() => {
              map.setFitView(
                [current], // 覆盖物数组
                false, // 动画过渡到制定位置
                [60, 60, 60, 60], // 周围边距，上、下、左、右
                10 // 最大 zoom 级别
              )
            }, 3000)
          }
        )
      })
    })
    .catch((e) => {
      console.log(e)
    })
}
</script>
<template>
  <div class="order-logistics-page">
    <div id="map">
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span>{{ logistics?.statusValue }}</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">订单派送中 预计{{ logistics?.estimatedTime }}送达</p>
        <p class="predict">
          <span>{{ logistics?.name }}</span>
          <span>{{ logistics?.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in logistics?.list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">
            {{ item.content }}
          </p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
